<template>
  <div class="activityDetail" style="width: 100%; background-color: #f5f5f5">
    <div style="width: 1200px; margin: 0 auto">
      <!-- 面包屑 -->
      <a-breadcrumb class="Allbreadcrumb" separator=">">
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/')"
          v-if="!$route.query.iscenter"
        >
          首页
        </a-breadcrumb-item>
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/activity')"
          v-if="!$route.query.iscenter"
        >
          幸福文旅
        </a-breadcrumb-item>
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/activity/activityList')"
          v-if="!$route.query.iscenter"
        >
          活动列表
        </a-breadcrumb-item>
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/personalCenter/myActivity')"
          v-if="$route.query.iscenter"
          >个人中心
        </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #ffbe37">活动详情</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="top">
      <div class="topLeft">
        <img
          class="imgborder"
          :src="imageWebUrl + nommData.cover"
          @error="$event.target.src = GLOBAL.defaultCover"
          alt=""
        />
        <img
          v-if="nommData.eventStatus != 5"
          class="image2"
          src="@/assets/image/icon_conduct.png"
          alt=""
        />
        <img v-else class="image2" src="@/assets/image/icon_End.png" alt="" />
      </div>
      <div class="topRight">
        <span class="aDspan1"
          >{{ nommData.title }}&nbsp;&nbsp;
          <!-- <span v-if="nommData.eventStatus != 5" class="aDspan2"
            ><a> 进行中</a></span
          >
          <a v-else class="aDspan10"> <a>已结束</a> </a> -->
        </span>

        <div class="fbiDiv" v-html="nommData.info"></div>
        <!-- 条件结束 -->
        <!-- 首先分为根据活动类型三种状态，征集活动，报名活动，纯展示活动 -->
        <!-- 首先是可以报名的活动，报名活动中包括4种状态，先决条件任何活动状态为已结束的不论其他，全部展示为已结束 -->

        <div
          class="signup"
          style="padding: 17px 12px 15px 0"
          v-if="nommData.type == 2"
        >
          <!-- 倒计时区域 -->
          <ul v-if="nommData.eventStatus != 5">
            <li>
              <span class="aDspan8">{{ this.day }}</span>
              <span class="aDspan9">天</span>
              <span class="aDspan8">{{ this.Time }}</span>
              <span class="aDspan9">时</span>
              <span class="aDspan8">{{ this.minute }}</span>
              <span class="aDspan9">分</span>
            </li>
            <!-- 活动下方文字 -->
            <li>
              <span
                class="aDtxt2"
                v-if="nommData.eventStatus == 1 || nommData.eventStatus == 2"
              >
                报名<a v-if="nommData.eventStatus == 1" class="aDtxt2">开始</a
                ><a v-if="nommData.eventStatus == 2" class="aDtxt2">结束</a
                >倒计时 </span
              ><!-- 活动状态 --><span
                class="aDtxt2"
                v-if="nommData.eventStatus == 3 || nommData.eventStatus == 4"
              >
                活动<a v-if="nommData.eventStatus == 3" class="aDtxt2">开始</a
                ><a v-if="nommData.eventStatus == 4" class="aDtxt2">结束</a
                >倒计时
              </span>
            </li>
          </ul>
          <!-- 第二个 -->
          <ul v-if="nommData.type == 2 && nommData.eventStatus != 5">
            <li>
              <span class="aDspan9">{{ nommData.peopNum }}人</span>
            </li>
            <li>
              <p class="aDtxt2">计划招募</p>
            </li>
          </ul>
          <ul v-if="nommData.type == 2 && nommData.eventStatus != 5">
            <li>
              <span class="aDspan8">{{ nommData.singupNum }}人</span>
            </li>
            <li>
              <p class="aDtxt2">已招募</p>
            </li>
          </ul>
          <!-- 取消报名的情况只能为已报名,且不于活动报满冲突 -->
          <div
            v-if="
              nommData.singupNum == nommData.peopNum ||
              (nommData.isSingup == 1 && nommData.eventStatus == 2)
            "
            style="flex: 1"
          >
            <span
              v-if="nommData.isSingup == 1 && nommData.eventStatus == 2"
              @click="cancelSingUp(1)"
              class="aDspan12"
              >取消报名</span
            >
            <!-- 针对于报名过而且该活动已报满 -->
            <span
              v-if="
                nommData.singupNum == nommData.peopNum &&
                nommData.isSingup != 1 &&
                nommData.eventStatus == 2
              "
              class="aDspan11"
              >立即报名<a>已报满</a></span
            >
          </div>
          <!-- 未报满之前的 -->
          <div v-else style="flex: 1">
            <!-- 报名未开始按钮 -->
            <span v-if="nommData.eventStatus == 1" class="aDspan11"
              >等待报名</span
            >
            <!-- 可报名按钮 -->
            <a-button
              v-if="nommData.isSingup != 1 && nommData.eventStatus == 2"
              style="background-color: #ffbe37"
              class="aDspan11"
              type="primary"
              @click="showModal()"
            >
              立即报名
            </a-button>
            <!-- 报名结束但活动未开始 -->
            <span v-if="nommData.eventStatus == 3" class="aDspan11"
              >报名结束</span
            >
            <!-- 进行中 -->
            <span v-if="nommData.eventStatus == 4" class="aDspan13"
              >进行中</span
            >
            <!-- 活动结束 -->
            <span v-if="nommData.eventStatus == 5" class="aDspan11"
              >活动结束</span
            >
          </div>

          <!-- 收藏功能 -->
          <div
            class="collection"
            v-if="!collectFlage"
            @click="collectFlag(nommData.eventNo)"
          >
            <a-icon type="star" style="color: #ffbe37" /> 收藏
          </div>
          <div class="collection" v-else @click="collectFlag(nommData.eventNo)">
            <a-icon type="star" style="color: #ffbe37" /> 已收藏
          </div>
        </div>
        <!-- 征集活动 -->
        <div class="signup" v-if="nommData.type == 3">
          <ul v-if="nommData.eventStatus == 1 || nommData.eventStatus == 2">
            <li>
              <span class="aDspan8">{{ this.day }}</span>
              <span class="aDspan9">天</span>
              <span class="aDspan8">{{ this.Time }}</span>
              <span class="aDspan9">时</span>
              <span class="aDspan8">{{ this.minute }}</span>
              <span class="aDspan9">分</span>
            </li>
            <!-- 活动下方文字 -->
            <li>
              <span class="aDtxt2">
                征集<a v-if="nommData.eventStatus == 1" class="aDtxt2">开始</a
                ><a v-if="nommData.eventStatus == 2" class="aDtxt2">结束</a
                >倒计时
              </span>
            </li>
          </ul>
          <div style="flex: 1">
            <a-button
              v-if="nommData.eventStatus == 2"
              style="background-color: #ff8d29"
              class="aDspan11"
              type="primary"
            >
              正在征集
            </a-button>
            <span
              v-if="nommData.eventStatus == 3 || nommData.eventStatus == 4"
              class="aDspan11"
              >征集结束</span
            >

            <span v-if="nommData.eventStatus == 5" class="aDspan11"
              >活动结束</span
            >
          </div>

          <!-- 收藏功能 -->
          <div
            class="collection"
            v-if="!collectFlage"
            @click="collectFlag(nommData.eventNo)"
          >
            <a-icon type="star" style="color: #ffbe37" /> 收藏
          </div>
          <div class="collection" v-else @click="collectFlag(nommData.eventNo)">
            <a-icon type="star" style="color: #ffbe37" /> 已收藏
          </div>
        </div>
        <!-- 展示活动 -->
        <div class="signup" v-if="nommData.type == 1">
          <ul v-if="nommData.eventStatus == 1 || nommData.eventStatus == 2">
            <li>
              <span class="aDspan8">{{ this.day }}</span>
              <span class="aDspan9">天</span>
              <span class="aDspan8">{{ this.Time }}</span>
              <span class="aDspan9">时</span>
              <span class="aDspan8">{{ this.minute }}</span>
              <span class="aDspan9">分</span>
            </li>
            <!-- 活动下方文字 -->
            <li>
              <span class="aDtxt2">
                活动<a v-if="nommData.eventStatus == 1" class="aDtxt2">开始</a
                ><a v-if="nommData.eventStatus == 2" class="aDtxt2">结束</a
                >倒计时
              </span>
            </li>
          </ul>
          <div style="flex: 1">
            <span
              v-if="nommData.eventStatus != 1 && nommData.eventStatus != 2"
              class="aDspan11"
              >活动结束</span
            >
          </div>
          <!-- 收藏功能 -->
          <div
            class="collection"
            v-if="!collectFlage"
            @click="collectFlag(nommData.eventNo)"
          >
            <a-icon type="star" style="color: #ffbe37" /> 收藏
          </div>
          <div class="collection" v-else @click="collectFlag(nommData.eventNo)">
            <a-icon type="star" style="color: #ffbe37" /> 已收藏
          </div>
        </div>
        <!-- 报名结束 -->
      </div>
    </div>
    <!-- top完结 -->
    <div class="center">
      <div class="left">
        <a-tabs default-active-key="1" :size="sizeOf" @change="callback">
          <a-tab-pane key="1" tab="活动介绍">
            <div v-html="nommData.briefDesc"></div>

            <a :href="nommData.attachmentList"></a>
          </a-tab-pane>
          <!-- <a-tab-pane key="2" tab="信息公开" force-render>
            <span class="aDspan5">
              义工要求2：
              {{ nommData.adaptivePopulation }}
              <br />
              1、会使用行政服务中心自助机器的优先，如不会也有岗前培训。
              <br />
              2、年龄在18-55岁，服从工作人员安排，做好个人防护工作。
              <br />
              3、准时到达服务，服务期间不能玩手机，不能吸烟，需衣着整齐不能穿拖鞋。
              <br />
              4、需身体健康，近期无发热等症状，需有佛山或南海的绿色通行证。
              <br />
              <br />
              【活动时间】
              <br />
              {{ nommData.activityTime }}
              <br />
              <br />
              【报名截止时间】
              <br />
              2020/12/15&nbsp;12:00
              <br />
              <br />
              【活动内容】
            </span>
          </a-tab-pane> -->
        </a-tabs>
      </div>
      <!-- 下半部分左边完成 -->
      <div class="right">
        <div style="background-color: #ffffff; padding: 30px">
          <span class="aDspan6">活动信息</span>
          <div class="information" v-html="nommData.sponsor"></div>
        </div>

        <div class="enclosure" v-if="0">
          <div style="width: 280px; border-top: 1px dashed #dedede"></div>
          <span class="aDspan14">附件下载</span>
          <ul>
            <li v-for="(item, index) in nommData.fileList" :key="index">
              <a
                :href="imageWebUrl + item.fileUrl"
                :download="imageWebUrl + item.fileUrl"
                >{{ item.fileName }}</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 报名弹窗 -->
    <a-modal
      class="baomingmodal"
      title="立即报名"
      closeIcon="x"
      :visible="modal1Visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk()"
      @cancel="changeFlag"
    >
      <div class="popup">
        <a-form
          class="snke"
          :form="forme"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 14 }"
        >
          <a-form-item label="姓名">
            <a-input
              autocomplete="off"
              size="large"
              placeholder="请输入姓名"
              v-decorator="[
                'name',
                {
                  rules: [
                    { required: true, message: '请输入姓名' },
                    {
                      pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
                      message: '请输入姓名',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>

          <a-form-item label="性别">
            <a-radio-group v-model="value" @change="onChange">
              <a-radio :value="1"> 男 </a-radio>
              <a-radio style="margin-left: 61px" :value="2"> 女 </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="年龄">
            <a-input
              autocomplete="off"
              size="large"
              placeholder="请输入年龄"
              v-decorator="[
                'birthday',
                {
                  rules: [
                    { required: true, message: '年龄' },
                    {
                      pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,
                      message: '请输入正确的年龄',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item label="手机号">
            <a-input
              autocomplete="off"
              size="large"
              placeholder="请输入手机号"
              v-decorator="[
                'mobile',
                {
                  rules: [
                    { required: true, message: '请输入手机号', name: 'tel' },
                    {
                      pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
                      message: '请输入正确的手机号',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item label="身份证号">
            <a-input
              autocomplete="off"
              size="large"
              placeholder="请输入身份证号"
              v-decorator="[
                'idNo',
                {
                  rules: [
                    { required: true, message: '请输入身份证号', name: 'tel' },
                    {
                      pattern:
                        /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                      message: '请输入正确的身份证号',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input
              autocomplete="off"
              size="large"
              placeholder="请输入邮箱"
              v-decorator="[
                'email',
                {
                  rules: [
                    { required: true, message: '请输入邮箱', name: 'tel' },
                    {
                      pattern:
                        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
                      message: '请输入正确的邮箱',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
        </a-form>
      </div>
      <template slot="footer">
        <a-button
          style="
            width: 150px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
          "
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          确认提交
        </a-button>
      </template>
    </a-modal>
    <!-- 请登录弹窗 -->
    <a-modal
      class="bassmodal"
      :visible="Visible"
      :closable="false"
      okText="登录"
      :dialog-style="{ top: '24%' }"
      @ok="() => setModal1Visible(false)"
      @cancel="changeFlag"
    >
      <template #footer>
        <a-button size="large" style="" @click="changeFlag()">取消</a-button>
        <a-button size="large" type="primary" @click="goLogin">去登录</a-button>
      </template>
      <p style="font-size: 18px; color: #000; margin-bottom: 1px">
        抱歉！请您先登录后操作。
      </p>
    </a-modal>
    <!-- 是否取消报名弹窗 -->
    <a-modal
      :closable="false"
      style="width: 550px"
      dialogClass="success"
      :maskClosable="false"
      :visible="visibleplase"
    >
      <template #footer>
        <a-button size="large" style="" @click="changeFlag()"
          >我再想想</a-button
        >
        <a-button
          size="large"
          type="primary"
          @click="cancelSingUp(2)"
          :loading="loading"
        >
          确定</a-button
        >
      </template>
      <template #title>
        <a-icon style="color: #fb6d00" type="info-circle" />
        <span style="display: inline-block; margin-left: 10px; color: #333333"
          >提示信息</span
        >
      </template>
      <div class="successModel">
        <span>是否取消报名</span>
      </div>
    </a-modal>
    <Login ref="login" />
    <Loading v-show="onLoading"></Loading>
  </div>
</template>
<script>
import Login from "@/components/popup/login/index.vue";
export default {
  components: { Login },
  data() {
    return {
      // 定时器
      inter: null,
      // config,
      loading: false,
      //唯一值
      idname: this.$route.query.id,
      //显示条件
      isShow: 0,
      //报名条件
      value: 1,
      // 请登陆的
      Visible: false,
      modal1Visible: false,
      visibleplase: false,
      //  倒计时
      singEndTime: "", //结束时间
      singStartTime: "", //报名开始时间
      day: "",
      Time: "",
      minute: "",
      second: "",
      ModalText: "Content of the modal",
      visible: false,
      confirmLoading: false,
      //
      nommData: {},
      nommDatalist: false,
      // 获取报名状态
      //固定
      top: 80,
      //
      forme: this.$form.createForm(this),
      host: false,
      // 获取当前收藏状态
      collectFlage: false,
      onLoading: false,
      //
      sizeOf: "large",
    };
  },
  methods: {
    // 登录弹框
    goLogin() {
      this.changeFlag();
      this.$refs["login"].tabIndex = 0;
      this.$refs["login"].tabType = 0;
      this.$refs["login"].visible = true;
      this.$refs["login"].maskClosable = true;
    },
    // 收藏功能
    collectFlag(e) {
      if (!this.changeFlagH()) {
        this.goLogin();
        return;
      }
      this.collectFlage = !this.collectFlag;
      this.$ajax({
        url: "/user/usercollect/save",
        method: "post",
        params: {
          collectType: 6,
          collectCode: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getactivityDetail();
        }
      });
    },
    // 查询活动详情
    getactivityDetail() {
      this.onLoading = true;
      this.$ajax({
        url: "/entrepreneurial/eventinfo/detail?eventNo=" + this.idname,
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          this.nommData = res.data;
          // 判断，是否携带附件
          if (res.data.fileList.length > 0) {
            this.nommDatalist = true;
          }
          this.collectFlage = res.data.collectFlag;
          this.inter = setInterval(() => {
            if (res.data.type == 2 || res.data.type == 3) {
              switch (res.data.eventStatus) {
                case 1:
                  this.returnDate(
                    new Date(this.nommData.signStartTime).getTime()
                  );
                  break;
                case 2:
                  this.returnDate(
                    new Date(this.nommData.signEndTime).getTime()
                  );
                  break;
                case 3:
                  this.returnDate(new Date(this.nommData.startDate).getTime());
                  break;
                case 4:
                  this.returnDate(new Date(this.nommData.endDate).getTime());
                  break;
                default:
                  break;
              }
            } else {
              switch (res.data.eventStatus) {
                case 1:
                  this.returnDate(
                    new Date(this.nommData.startDate).getTime()
                  );
                  break;
                case 2:
                  this.returnDate(
                    new Date(this.nommData.endDate).getTime()
                  );
                  break;
                case 3:
                  this.returnDate(new Date(this.nommData.startDate).getTime());
                  break;
                case 4:
                  this.returnDate(new Date(this.nommData.endDate).getTime());
                  break;
                default:
                  break;
              }
            }
          }, 1000);
        } else {
          this.onLoading = false;
        }
      });
    },
    // 判断登录状态
    changeFlagH() {
      // console.log(this.$store.state.token)
      // return;
      // 先判断登录状态，有则
      if (this.$store.state.token != "") {
        // 取消无登录状态
        return true;
      } else {
        this.goLogin();
        return false;
      }
    },
    // 取消的回调
    changeFlag() {
      this.modal1Visible = false;
      this.Visible = false;
      this.visibleplase = false;
    },
    setModal1Visible(Visible) {
      mutations.changeVisible(true);
      this.Visible = Visible;
    },
    // key值计算器
    callback(key) {},
    // 倒计时
    returnDate(e) {
      if (e == 0) {
        this.day = 0;
        this.Time = 0;
        this.minute = 0;
        this.second = 0;
      } else {
        e = e - new Date().getTime();
        // 天
        this.day = Math.floor(e / 1000 / 60 / 60 / 24);
        if (this.day < 10) {
          this.day = "0" + this.day;
        }
        e = e - 1000 * 3600 * 24 * this.day;
        // 小时
        this.Time = Math.floor(e / 1000 / 60 / 60);
        if (this.Time < 10) {
          this.Time = "0" + this.Time;
        }
        e = e - 1000 * 3600 * this.Time;
        // 分钟
        this.minute = Math.floor(e / 1000 / 60);
        if (this.minute < 10) {
          this.minute = "0" + this.minute;
        }
        e = e - 1000 * 60 * this.minute;
        // 秒钟
        this.second = Math.floor(e / 1000);
        if (this.second < 10) {
          this.second = "0" + this.second;
        }
      }
      // return `${this.day}天${this.Time}小时${this.minute}分${this.second}秒`;
    },
    // 加载动画
    selLoading() {
      setTimeout(() => {
        this.changeFlag();
        this.loading = false;
        this.visible = false;
        this.visibleplase = false;
        this.confirmLoading = false;
      }, 2000);
    },
    // 立即报名
    showModal() {
      if (!this.changeFlagH()) {
        return;
      }
      this.modal1Visible = true;
    },
    // 点击确定报名后
    handleOk() {
      this.ModalText = "The modal will be closed after two seconds";
      this.forme.validateFields((err, values) => {
        values.eventNo = this.idname;
        values.sex = this.value;
        // console.log(values);
        if (!err) {
          this.loading = true;
          this.$ajax({
            url: "/entrepreneurial/eventsignup/save",
            method: "post",
            params: values,
          }).then((res) => {
            if (res.code == 200) {
              this.confirmLoading = true;
              this.$message.success("报名成功请等待通知");
              this.getactivityDetail();
              // 拆一个加载动画
              this.selLoading();
              // 进行报名
              setTimeout(() => {
                this.forme.resetFields();
              }, 5000);
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error("输入错误");
        }
      });
    },
    // 单选
    onChange(e) {
      return e;
      console.log("radio checked");
    },
    // 查询活动详情
    selById(e) {
      // console.log(this.city);
      this.$ajax({
        url: "/activity/selById",
        // method: 'post',
        params: {
          id: e, //唯一值
          roleId: this.roleId == null ? "" : this.roleId, //角色id
          roleType: this.roleType == null ? "" : this.roleType, //角色类型
        },
      }).then((res) => {
        if (res.code == "200") {
          this.nommData = res.data;
          this.singEndTime = res.data.singEndTime;
          this.singStartTime = res.data.singStartTime;
          this.isShow = res.data.isSingup;
          //  console.log('成功');
        } else {
          this.nommData = "";
          //  console.log('失败');
        }
      });
    },
    // 取消报名
    cancelSingUp(e) {
      if (e == 1) {
        this.visibleplase = true;
      } else {
        this.loading = true;
        this.$ajax({
          url: "/entrepreneurial/eventsignup/save",
          method: "post",
          params: {
            eventNo: this.idname,
          },
        }).then((res) => {
          if (res.code == "200") {
            this.getactivityDetail();
            this.selLoading();
          } else {
            this.visibleplase = false;
            //  console.log('失败');
          }
        });
      }
    },
  },
  destroyed() {
    clearInterval(this.inter);
  },
  mounted() {
    this.getactivityDetail();

    // this.$once("hook:befreDestroy", () => {
    //   clearInterval(this.returnDate);
    // }),
    //   this.selById(this.idname);
  },
};
</script>

<style lang="less" scoped>
.activityDetail {
  width: 100%;
  min-height: calc(100vh - 260px);
}
/deep/.ant-breadcrumb > span:last-child {
  color: #fb6d00;
}
.top {
  width: 1200px;
  min-width: 980px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 30px 30px;
  display: flex;
  overflow: hidden;
  .topLeft {
    width: 450px;
    height: 270px;
    img {
      width: 100%;
      height: 100%;
    }
    .image2 {
      width: 121px;
      height: 104px;
      position: relative;
      top: -274px;
      left: -5px;
    }
  }
  .topRight {
    padding: 0 0 0 30px;
    ul {
      li {
        margin-top: 6px;
        &:first-child {
          margin-top: 0px;
        }
      }
    }
    .signup {
      width: 660px;
      height: 81px;
      background-color: #f8f8fa;
      margin-top: 22px;
      padding: 17px 30px 17px 0;
      display: flex;
      align-items: center;
      ul {
        margin: 0 20px;
        flex-shrink: 0;
        li {
          text-align: center;
        }
      }
    }
  }
}
// top
// center
/deep/ .information {
  margin-top: 18px;
  p {
    text-align: left;
  }
}
.center {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  padding-bottom: 20px;
  .left {
    width: 830px;
    background-color: #ffffff;
    padding: 30px 30px;
  }
  .right {
    width: 340px;
    // height: 185px;
    //  padding: 30px;
    margin-left: 30px;
    .enclosure {
      padding: 0 30px 30px 30px;
      // border-top: 1px #f5f5f5 solid;
      min-height: 100px;
      background-color: #ffffff;
      .aDspan14 {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 18px;
        display: block;
        margin-top: 36px;
      }
      ul {
        li {
          margin-top: 12px;
          a {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            color: #333;
            line-height: 18px;
          }
          a:hover {
            color: #fb6d00;
          }
        }
      }
    }
  }
}
/deep/.left {
  img {
    max-width: 770px;
  }
}
// 弹窗
.snke {
  .ant-form-split {
    margin-left: 33px !important;
  }
  .ant-input {
    background-color: #fff !important;
  }
  /deep/.ant-form-item {
    padding: 0 50px;
    display: flex;
    margin-bottom: 0;
    flex-direction: column;
    .ant-form-item-label {
      width: auto;
      text-align: left;
      position: relative;
      overflow: initial;
      label::before {
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .ant-form-item-control-wrapper {
      width: 100%;
    }
  }
}
.baomingmodal {
  /deep/.ant-modal-title {
    width: 100px;
    margin: 0 auto;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 18px;
  }
  /deep/.ant-modal-header {
    border-bottom: #ffffff solid 1px !important;
  }
  /deep/.ant-modal-content {
    width: 460px;
    margin: 0 auto;
    padding-bottom: 20px;
  }
  /deep/.ant-modal-footer {
    width: 150px;
    margin: 0 auto;
    border-top: 1px solid #ffffff;
  }
}

// txt
.aDtxt2 {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
}
// span
.aDspan1 {
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 33px;
  display: block;
}
.aDspan2 {
  width: 50px;
  height: 20px;
  background-color: #ff954d;
  display: inline-block;
  line-height: 21px;

  a {
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #ffffff;
    vertical-align: top;
    margin-left: 7px;
  }
}
.aDspan3 {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
}
.aDspan4 {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
}
.aDspan5 {
  z-index: 22;
  width: 771px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  line-height: 26px;
  text-align: justify;
  align-self: center;
  margin-top: 20px;
}
.aDspan6 {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 18px;
}
.aDspan7 {
  display: block;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  line-height: 30px;
  text-align: left;
  align-self: center;
  margin-top: 24px;
}
.aDspan8 {
  font-size: 16px;
  font-family: PingFangSC-Medium;
  color: #fb6d00;
  line-height: 24px;
  margin: 0 4px;
}
.aDspan9 {
  font-size: 16px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 24px;
}
.aDspan10 {
  width: 50px;
  height: 20px;
  background-color: #cccccc;
  display: inline-block;
  line-height: 21px;

  // margin-left: 15px;
  a {
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #ffffff;
    vertical-align: top;
    margin-left: 7px;
  }
}
.aDspan11 {
  width: 130px;
  height: 40px;
  line-height: 40px;
  background-color: #cccccc;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  color: #232d32;
  text-align: center;
  justify-self: center;
  display: block;
  border-radius: 2px;
  margin-left: 24px;
}
.aDspan12 {
  width: 130px;
  padding: 10px 30px;
  background-color: #ffffff;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  color: #fb6d00;
  border: solid #fb6d00 1px;
  text-align: center;
  justify-self: center;
  display: block;
  margin-left: 56px;
  cursor: pointer;
}
.aDspan13 {
  width: 118px;
  height: 40px;
  padding: 12px 37px;
  border: #fb6d00 solid 1px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  color: #fb6d00;
  text-align: center;
  justify-self: center;
  display: block;
  margin-left: 56px;
  cursor: no-drop;
  border-radius: 2px;
}
.collection {
  font-size: 14px;
  font-family: PingFang SC;
  color: #333333;
  line-height: 40px;
  margin-left: 20px;
  flex-shrink: 0;
}

// 修改框架样式
/deep/.ant-tabs-nav .ant-tabs-tab-active {
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
</style>
